<script setup>
import { onUnmounted, reactive, ref} from "vue";
import {$ajax, apiUrl} from "@/utils/ajax";
import router from "@/router";

const login = ref(null)
const loginForm = reactive({username: '', password: '',login: 0})
const timer = ref(0)
let time = null
const loginRules = reactive({
  username: [
    {required: true, message: '请输入手机号', trigger: 'blur'},
    //手机号验证
    {pattern: /^1[3456789]\d{9}$/, message: '手机号格式错误'}
  ],
  password: [
    {required: true, message: '请输入短信验证码', trigger: 'blur'}
  ],
})
const loading = ref(false)
const submitForm = (refs) => {
  console.log(refs)
  refs.validate(valid => {
    loading.value = valid
    if (valid) {
      console.log(process.env.VUE_APP_API_URL)
      $ajax.post(`${apiUrl}authorization/merchantLogin`, loginForm).then(({data: {result}}) => {
        loading.value = false
        let res = {
          id: result.id,
          expireTime: result.last_time,
          token: result.token
        }
        window.localStorage.setItem("merchant_account", JSON.stringify(res))
        router.replace({name: 'home'})
      }).catch(() => {
        loading.value = false
      })
    }
  })
}
const getCode = (refs) => {
  refs.validateField(['username'], (valid) => {
    loading.value = valid
    if (valid) {
      $ajax.post(`${apiUrl}authorization/merchantLoginCode`, {
        mobile: loginForm.username,
        captcha: loginForm.captcha
      }).then(() => {
        loading.value = false
        timer.value = 60
        djs()
      }).catch(() => {
        loading.value = false
      })
    }
  })
}
const djs = () => {
  if (timer.value < 1) {
    clearTimeout(time)
    return;
  }
  time = setTimeout(() => {
    timer.value--
    djs()
  }, 1000)
}
onUnmounted(() => {
  clearTimeout(time)
  timer.value = 0
})

const changeLoginType = (type) => {
  if(type === loginForm.login) return;
  loginForm.login = type
  if(type === 0) loginRules.password[0].message = "请输入短信验证码"
  else loginRules.password[0].message = "请输入密码"
  login.value.resetFields()
}
</script>

<template>
  <div class="login-box">
    <el-card class="login-card">
      <template #header>
        渠道代理登陆
        <!--        智行九州渠道管理登录-->
      </template>
      <div class="login-tabs">
        <div class="login-tabs-title" :class="{'login-tabs-actives':loginForm.login===0}" @click="changeLoginType(0)">短信登陆
        </div>
        <div class="login-tabs-title" :class="{'login-tabs-actives':loginForm.login===1}" @click="changeLoginType(1)">账号登陆
        </div>
      </div>
      <el-form ref="login" :model="loginForm" label-position="top" :rules="loginRules" @keyup.enter="submitForm(login)"
               size="large">
        <el-form-item prop="username" label="手机号">
          <el-input v-model="loginForm.username" placeholder="请输入手机号" autofocus clearable>
            <template #suffix v-if="loginForm.login===0">
              <el-button link type="primary" size="small" :disabled="timer > 0" :loading="loading"
                         @click="getCode(login)">{{
                  timer > 0 ? `${timer > 9 ? timer : `0${timer}`}秒后重发` : '获取验证码'
                }}
              </el-button>
            </template>
          </el-input>
        </el-form-item>
        <el-form-item prop="password" :label="loginForm.login===0 ? '验证码' : '密码'">
          <el-input v-model="loginForm.password" :placeholder="`请输入${loginForm.login===0 ? '短信验证码' : '密码'}`" :type="loginForm.login===0 ? 'text' : 'password'" clearable/>
        </el-form-item>
        <el-form-item>
          <el-button type="primary" @click="submitForm(login)" round :loading="loading">登录</el-button>
        </el-form-item>
      </el-form>
    </el-card>
  </div>
</template>

<style lang="less">
.login-box {
  position: fixed;
  width: 65vw;
  left: 50%;
  margin-left: -32.5vw;
  bottom: 0;
  top: 0;
  background: url("@/assets/img/banner.jpg") no-repeat;
  background-size: 100% 100%;

  .el-card {
    width: 45%;
    height: 380px;
    position: absolute;
    //right: 10%;
    right: 15px;
    top: 15%;
    z-index: 2;

    .login-tabs {
      display: flex;
      margin-bottom: 20px;
      justify-content: center;
      align-content: center;

      .login-tabs-title {
        margin-right: 10px;
        position: relative;
        cursor: pointer;

        &:after {
          content: "";
          position: absolute;
          height: 5px;
          background: #ffffff;
          left: 10px;
          right: 10px;
          border-radius: 10px;
          bottom: -10px;
        }

        &.login-tabs-actives:after {
          background: #409EFF;
        }
      }
    }

    .el-input {
      .el-input__wrapper {
        border-radius: 45px;
      }
    }

    .el-button{
      width: 90%;
      margin: auto;
    }
  }
}

@media screen and (max-width: 768px) {
  .login-box {
    width: 100vw;
    left: 0;
    margin-left: 0;

    &::before {
      content: '';
      position: absolute;
      top: 0;
      left: 0;
      right: 0;
      bottom: 0;
      background: inherit; /* 继承父元素的背景 */
      filter: blur(8px); /* 模糊效果 */
      z-index: 1;
    }

    .el-card {
      width: 300px;
      margin-left: -150px;
      left: 50%;
    }
  }
}
</style>
